window.onload = function() {

    // localStorage.removeItem("historyMaxScore");
    
    var gameUI = document.querySelector('#gameUI');  // 游戏的UI界面
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var startbtn = document.querySelector("#start-button");  // 按钮-游戏开始
    var selectMode = document.querySelector("#select-mode");  // 按钮-游戏模式选择
    var normalMode = document.querySelector('#normal');  // 按钮-普通模式
    var speedMode = document.querySelector("#speed");  // 按钮-变速模式
    var change = false;  // 变速是否开启
    var Score = document.querySelector('#score');  // 分数
    var history = document.querySelector("#historyMaxScore");  // 历史最高分

    // 生成随机数的函数
    function random(min, max) {

        const num = Math.floor(Math.random() * (max - min)) + min;
        return num;

    }

    // 生成随机颜色
    function randomColor() {

        return 'rgb(' +
            random(0, 255) + ', ' +
            random(0, 255) + ', ' +
            random(0, 255) + ')';
            
    }

    /*
        定义一个绘图函数，每次使用一组不同的变量改变球体的位置；
        循环调用以保持画布上每一帧不断更新
    */ 

    var x = canvas.width / 2;  // 球的坐标
    var y = canvas.height - 30;
    var dx = 2;  // 球的运动增量
    var dy = -2;
    var ballRadius = 10;  // 球的半径
    var paddleHeight = 10;  // 球板的高度
    var paddleWidth = 75;  // 球板的宽度
    var paddleX = (canvas.width - paddleWidth) / 2;  // 球板的位置
    var leftPressed = false;  // 左键是否按下
    var rightPressed = false;  // 右键是否按下
    
    // 存储游戏得分
    var score = 0;
    var historyMaxScore = Number(localStorage.getItem("historyMaxScore"));  // 获取历史最高得分
    history.innerHTML = "history: " + historyMaxScore;


    function drawBall() {

        // 绘制球
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = randomColor();
        ctx.fill();
        ctx.closePath();
        // 左右碰壁
        if(x + ballRadius > canvas.width || x - ballRadius < 0)
        {
            dx = -dx;
            // 变速
            if(change)
            {
                changeSpeed();
            }
        }
        // 上碰壁
        if(y - ballRadius < 0)
        {
            dy = -dy;
            if(change)
            {
                changeSpeed();
            }
        }
        // 球板接住了球
        if(x + ballRadius > paddleX && x - ballRadius < paddleX + paddleWidth && y >= canvas.height - paddleHeight)
        {
            dy = -dy;
            if(change)
            {
                changeSpeed();
            }
        }
        else if(y + ballRadius > canvas.height) 
        {  
            clearInterval(running);
            clearInterval(timer);
            if(historyMaxScore < score)
            {
                localStorage.setItem("historyMaxScore", score);
            }
            alert("GAME OVER，你的分数是：" + score);
            document.location.reload();
        }  

    }

    // 变速
    function changeSpeed() {
            
        if(dx > 0)
        {
            dx += 0.1;
        }
        else
        {
            dx += -0.1;
        }
        if(this.dy > 0)
        {
            dy += 0.1;
        }
        else
        {
            dy += -0.1;
        }

    }

    function drawPaddle() {

        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = randomColor();
        ctx.fill();
        ctx.closePath()

    }

    function draw() {

        // 先清除上一帧画面
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 绘制出球
        drawBall();
        drawPaddle();
        // 球位移
        x += dx;
        y += dy;
        // 球板左移
        if(leftPressed && paddleX > 0)
        {
            paddleX -= 7;
        }
        // 球板右移
        if(rightPressed && paddleX < canvas.width - paddleWidth)
        {
            paddleX += 7;
        }
        
    }

    document.addEventListener('keydown', keyDownHandler);
    document.addEventListener('keyup', keyUpHandler);
    
    function keyDownHandler(e) {
        
        // 左键
        if(e.key == 'ArrowLeft')
        {
            leftPressed = true;
        }
        // 右键
        if(e.key == 'ArrowRight')
        {
            rightPressed = true;
        }

    }

    function keyUpHandler(e) {

        // 左键
        if(e.key == 'ArrowLeft')
        {
            leftPressed = false;
        }
        // 右键
        if(e.key == 'ArrowRight')
        {
            rightPressed = false;
        }

    }

    function printScore() {

        Score.innerHTML = "Score: " + (++score);

    }

    var running;
    var timer;

    // 开始游戏并选择游戏模式
    startbtn.addEventListener('click', function() {
        
        startbtn.style.display = 'none';
        selectMode.style.display = 'block';

        // 如果选择了普通模式
        normalMode.addEventListener('click', function() {

            selectMode.style.display = 'none';
            // 游戏开始
            gameUI.style.display = 'block';
            // 创建一个定时器，每10ms调用一次draw函数，重绘游戏界面，因为时间间隔非常短，所以看起来就像连续运动
            running = setInterval(draw, 10);
            // 计分
            setInterval(printScore, 1000);
        });

        // 如果选择了变速模式
        speedMode.addEventListener('click', function() {

            selectMode.style.display = 'none';
            // 开启变速
            change = true;
            // 游戏开始
            gameUI.style.display = 'block';
            // 创建一个定时器，每10ms调用一次draw函数，重绘游戏界面，因为时间间隔非常短，所以看起来就像连续运动
            running = setInterval(draw, 10);   
            // 计分
            setInterval(printScore, 1000);
        });
        
    });

}